<template>
  <div class="login-page">
    <div class="index">
      <div class="title">Test</div>
      <div class="desc">Smart Inspection System</div>
      <a-button class="btn" @click="loginBtn">Login</a-button>
    </div>
    <div class="img-box">
      <img src="../assets/login page.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    loginBtn() {
      this.$router.push("/inspection");
    },
  },
};
</script>
<style scoped>
.login-page {
  /* height: calc(100vh - 0.52rem - 0.34rem); */
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.index {
  width: 100vw;
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 0.52rem 0 0.34rem;
}
.title {
  font-size: 0.2rem;
  background-color: var(--primary-color);
  line-height: 0.4rem;
}
.desc {
  font-size: 0.14rem;
}
.btn {
  width: 1.4rem;
  height: 0.2rem;
  font-size: 0.1rem;
  background-color: var(--primary-color);
  color: var(--text-color);
}
.btn:hover {
  color: var(--text-color);
  border-color: var(--primary-color);
}
.img-box {
  overflow: hidden;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.img-box img {
  width: 100%;
}
</style>
